React Portal Patternlari: Modal va Qoplama (Overlay) Amaliyotga Kiritish Strategiyalari

React Portallari bolalarni (children) ota-ona komponentining DOM ierarxiyasidan tashqarida joylashgan DOM tuguniga render qilishning kuchli usulini taklif etadi. Bu imkoniyat, ayniqsa, o'z ota-ona konteynerlarining cheklovlaridan chiqib ketishi kerak bo'lgan modallar, qoplamalar, maslahatlar va boshqa UI elementlarini yaratish uchun foydalidir. Ushbu keng qamrovli qo'llanma global auditoriya uchun qulay va samarali modallar va qoplamalarni yaratishda React Portallaridan foydalanishning eng yaxshi amaliyotlari, ilg'or usullari va keng tarqalgan xatolarini chuqur o'rganadi.

React Portallari nima?

Oddiy React ilovalarida komponentlar o'zlarining ota-ona komponentlarining DOM daraxti ichida render qilinadi. Biroq, bu standart xatti-harakat istalmagan holatlar mavjud. Masalan, modal dialog o'z ota-onasining overflow yoki stacking konteksti bilan cheklanishi mumkin, bu esa kutilmagan vizual nosozliklarga yoki cheklangan joylashuv imkoniyatlariga olib keladi. React Portallari komponentga o'z bolalarini DOMning boshqa qismiga render qilishga imkon berib, ota-ona chegaralaridan samarali "qochib chiqish" orqali yechim taklif qiladi.

Mohiyatan, React Portali - bu komponentning bolalarini (bular har qanday React tuguni, shu jumladan boshqa komponentlar bo'lishi mumkin) joriy DOM ierarxiyasidan tashqarida, boshqa DOM tuguniga render qilish usulidir. Bunga ReactDOM.createPortal(child, container) funksiyasi yordamida erishiladi. child argumenti siz render qilmoqchi bo'lgan React elementi, container argumenti esa uni render qilmoqchi bo'lgan DOM elementidir.

Asosiy Sintaksis

Quyida ReactDOM.createPortaldan qanday foydalanishning oddiy misoli keltirilgan:

            import ReactDOM from 'react-dom';

function MyComponent() {
  return ReactDOM.createPortal(
    <div>Ushbu kontent ota-ona komponentidan tashqarida render qilinadi!</div>,
    document.getElementById('portal-root') // O'zingizning konteyneringiz bilan almashtiring
  );
}

            

              
                Copy
              
            
          

Ushbu misolda, MyComponent tarkibi, MyComponent React komponentlar daraxtida qayerda joylashganligidan qat'i nazar, 'portal-root' ID'siga ega DOM tuguni ichida render qilinadi.

Nima uchun Modallar va Qoplamalar uchun React Portallaridan foydalanish kerak?

Modallar va qoplamalar uchun React Portallaridan foydalanish bir nechta asosiy afzalliklarni taqdim etadi:

• CSS Konfliktlaridan qochish: Modallar va qoplamalar ko'pincha ilovaning eng yuqori darajasida joylashtirilishi kerak, bu esa ota-ona komponentlarida belgilangan uslublar bilan ziddiyatga olib kelishi mumkin. Portallar bu elementlarni ota-onaning doirasidan tashqarida render qilishga imkon beradi, bu esa CSS ziddiyatlarini minimallashtiradi va uslublarning bir xilligini ta'minlaydi. Har bir sotuvchining mahsulotlari va modal uslublari bir-biriga zid kelmasligi kerak bo'lgan global elektron tijorat platformasini tasavvur qiling. Portallar bu izolyatsiyaga erishishga yordam beradi.
• Yaxshilangan Stacking Konteksti: Modallar ko'pincha boshqa elementlar ustida paydo bo'lishini ta'minlash uchun yuqori z-index talab qiladi. Agar modal pastroq stacking kontekstiga ega bo'lgan ota-ona ichida render qilinsa, z-index kutilganidek ishlamasligi mumkin. Portallar modalni to'g'ridan-to'g'ri body elementi (yoki boshqa mos yuqori darajadagi konteyner) ostida render qilish orqali bu muammoni chetlab o'tadi va kerakli stacking tartibini kafolatlaydi.
• Kengaytirilgan Qulaylik: Modal ochiq bo'lganda, odatda klaviatura foydalanuvchilari faqat modal tarkibida harakatlana olishini ta'minlash uchun fokusni modal ichida ushlab turishni xohlaysiz. Portallar fokusni ushlab turishni boshqarishni osonlashtiradi, chunki modal DOMning yuqori darajasida render qilinadi, bu esa fokusni boshqarish mantig'ini amalga oshirishni soddalashtiradi. Bu WCAG kabi xalqaro qulaylik ko'rsatmalari bilan ishlashda juda muhimdir.
• Toza Komponent Tuzilmasi: Portallar React komponent tuzilmangizni toza va qo'llab-quvvatlanadigan holda saqlashga yordam beradi. Modal yoki qoplamaning vizual taqdimoti ko'pincha uni ishga tushiradigan komponentdan mantiqan ajratilgan bo'ladi. Portallar sizga bu ajratishni kodingizda aks ettirishga imkon beradi.

React Portallari yordamida Modallarni Amalga Oshirish: Qadamma-qadam Qo'llanma

Keling, React Portallaridan foydalangan holda modal komponentini amalga oshirishning amaliy misolini ko'rib chiqamiz.

1-qadam: Portal Konteynerini Yaratish

Birinchidan, sizga modal tarkibi render qilinadigan DOM elementi kerak. Bu ko'pincha index.html faylingizdagi body tegi ichiga joylashtirilgan div elementidir:

            <body>
  <div id="root"></div>
  <div id="modal-root"></div>
</body>

            

              
                Copy
              
            
          

2-qadam: Modal Komponentini Yaratish

Endi, ReactDOM.createPortal yordamida o'z bolalarini modal-root konteyneriga render qiladigan Modal komponentini yarating:

            import ReactDOM from 'react-dom';
import React, { useEffect, useRef } from 'react';

const modalRoot = document.getElementById('modal-root');

function Modal({ children, isOpen, onClose }) {
  const elRef = useRef(null);

  if (!elRef.current) {
    elRef.current = document.createElement('div');
  }

  useEffect(() => {
    if (isOpen) {
        modalRoot.appendChild(elRef.current);
        // Komponent o'chirilganda tozalash
        return () => modalRoot.removeChild(elRef.current);
    }

    // Modal yopilganda va o'chirilganda tozalash
    if (elRef.current && modalRoot.contains(elRef.current)) {
      modalRoot.removeChild(elRef.current);
    }
  }, [isOpen]);

  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div className="modal-overlay" onClick={onClose} style={{position: 'fixed', top: 0, left: 0, width: '100%', height: '100%', backgroundColor: 'rgba(0, 0, 0, 0.5)', display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
        <div className="modal-content" onClick={(e) => e.stopPropagation()} style={{backgroundColor: 'white', padding: '20px', borderRadius: '5px'}}>
            {children}
            <button onClick={onClose}>Yopish</button>
        </div>
    </div>,
    elRef.current // Dinamik qo'shish va olib tashlash uchun elRef dan foydalanish
  );
}

export default Modal;

            

              
                Copy
              
            
          

Ushbu komponent prop sifatida children qabul qiladi, bu siz modal ichida ko'rsatmoqchi bo'lgan kontentni anglatadi. Shuningdek, u isOpen (modal ko'rinishi kerakligini ko'rsatuvchi mantiqiy qiymat) va onClose (modalni yopish uchun funksiya) ni qabul qiladi.

Ushbu amaliyotdagi muhim jihatlar:

• Elementni Dinamik Yaratish: elRef va useEffect hook'i portal konteynerini dinamik ravishda yaratish va modal-root ga qo'shish uchun ishlatiladi. Bu portal konteynerining faqat modal ochiq bo'lgandagina DOMda mavjud bo'lishini ta'minlaydi. Bu, shuningdek, ReactDOM.createPortal oldindan mavjud bo'lgan DOM elementini kutishi sababli zarurdir.
• Shartli Rendering: isOpen prop'i modalni shartli ravishda render qilish uchun ishlatiladi. Agar isOpen false bo'lsa, komponent null qaytaradi.
• Qoplama va Kontent Uslubi: Komponent modal qoplamasi va kontenti uchun asosiy uslublarni o'z ichiga oladi. Siz bu uslublarni ilovangiz dizayniga mos ravishda sozlashingiz mumkin. E'tibor bering, bu misolda soddalik uchun inline uslublar ishlatilgan, ammo haqiqiy ilovada siz CSS sinflari yoki CSS-in-JS yechimidan foydalanishingiz mumkin.
• Hodisalarning Tarqalishi (Event Propagation): modal-content dagi onClick={(e) => e.stopPropagation()} klik hodisasining modal-overlay ga tarqalishini oldini oladi, bu esa tasodifan modalni yopib qo'yishi mumkin edi.
• Tozalash: useEffect hook'i komponent o'chirilganda yoki isOpen false ga o'zgarganda dinamik ravishda yaratilgan elementni DOMdan olib tashlaydigan tozalash funksiyasini o'z ichiga oladi. Bu xotira sizib chiqishining oldini olish va DOMning toza qolishini ta'minlash uchun muhimdir.

3-qadam: Modal Komponentidan Foydalanish

Endi siz Modal komponentini o'z ilovangizda ishlatishingiz mumkin:

            import React, { useState } from 'react';
import Modal from './Modal';

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => setIsModalOpen(true);
  const closeModal = () => setIsModalOpen(false);

  return (
    <div>
      <button onClick={openModal}>Modalni Ochish</button>

      <Modal isOpen={isModalOpen} onClose={closeModal}>
        <h2>Modal Kontenti</h2>
        <p>Bu modalning kontenti.</p>
      </Modal>
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

Ushbu misolda tugma modalning ochilishini ishga tushiradi. Modal komponenti uning ko'rinishini boshqarish uchun isOpen va onClose proplarini qabul qiladi.

React Portallari yordamida Qoplamalarni Amalga Oshirish

Yuklanish ko'rsatkichlari, fon effektlari yoki bildirishnoma panellari uchun tez-tez ishlatiladigan qoplamalar ham React Portallaridan foyda olishi mumkin. Amalga oshirish modallarga juda o'xshash, ammo ma'lum bir foydalanish holatiga mos keladigan ba'zi kichik o'zgartirishlar bilan.

Misol: Yuklanish Qoplamasi

Keling, ma'lumotlar yuklanayotganda butun ekranni qoplaydigan oddiy yuklanish qoplamasini yaratamiz.

            import ReactDOM from 'react-dom';
import React, { useEffect, useRef } from 'react';

const overlayRoot = document.getElementById('overlay-root');

function LoadingOverlay({ isLoading, children }) {
  const elRef = useRef(null);

    if (!elRef.current) {
        elRef.current = document.createElement('div');
    }

    useEffect(() => {
        if (isLoading) {
            overlayRoot.appendChild(elRef.current);
            return () => overlayRoot.removeChild(elRef.current);
        }

        if (elRef.current && overlayRoot.contains(elRef.current)) {
            overlayRoot.removeChild(elRef.current);
        }
    }, [isLoading]);

  if (!isLoading) return null;

  return ReactDOM.createPortal(
    <div className="loading-overlay" style={{position: 'fixed', top: 0, left: 0, width: '100%', height: '100%', backgroundColor: 'rgba(0, 0, 0, 0.3)', display: 'flex', justifyContent: 'center', alignItems: 'center', zIndex: 9999}}>
      {children}
    </div>,
    elRef.current
  );
}

export default LoadingOverlay;

            

              
                Copy
              
            
          

Ushbu LoadingOverlay komponenti isLoading prop'ini qabul qiladi, bu qoplamaning ko'rinishini belgilaydi. isLoading true bo'lganda, qoplama butun ekranni yarim shaffof fon bilan qoplaydi.

Komponentdan foydalanish uchun:

            import React, { useState, useEffect } from 'react';
import LoadingOverlay from './LoadingOverlay';

function App() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // Ma'lumotlarni yuklashni simulyatsiya qilish
    setTimeout(() => {
      setData({ message: 'Ma\'lumotlar yuklandi!' });
      setIsLoading(false);
    }, 2000);
  }, []);

  return (
    <div>
      <LoadingOverlay isLoading={isLoading}>
        <p>Yuklanmoqda...</p>
      </LoadingOverlay>

      {data ? <p>{data.message}</p> : <p>Ma'lumotlar yuklanmoqda...</p>}
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

Portalning Ilg'or Usullari

1. Dinamik Portal Konteynerlari

modal-root yoki overlay-root ID'larini qattiq kodlash o'rniga, siz komponent o'rnatilganda portal konteynerini dinamik ravishda yaratishingiz mumkin. Bu yondashuv, agar siz konteynerning atributlari yoki DOMdagi joylashuvi ustidan ko'proq nazoratga ega bo'lishingiz kerak bo'lsa, foydalidir. Yuqoridagi misollar allaqachon bu yondashuvdan foydalanadi.

2. Portal Maqsadlari uchun Kontekst Provayderlari

Murakkab ilovalar uchun siz portal maqsadini dinamik ravishda belgilash uchun kontekst taqdim etishni xohlashingiz mumkin. Bu sizga portal ishlatadigan har bir komponentga maqsad elementini prop sifatida uzatishdan qochish imkonini beradi. Masalan, siz modal-root elementini o'z doirasidagi barcha komponentlar uchun mavjud qiladigan PortalProvider ga ega bo'lishingiz mumkin.

            import React, { createContext, useContext, useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';

const PortalContext = createContext(null);

function PortalProvider({ children }) {
  const portalRef = useRef(document.createElement('div'));

  useEffect(() => {
    const portalNode = portalRef.current;
    portalNode.id = 'portal-root';
    document.body.appendChild(portalNode);
    return () => {
      document.body.removeChild(portalNode);
    };
  }, []);

  return (
    <PortalContext.Provider value={portalRef.current}>
      {children}
    </PortalContext.Provider>
  );
}

function usePortal() {
  const portalNode = useContext(PortalContext);
  if (!portalNode) {
    throw new Error('usePortal PortalProvider ichida ishlatilishi kerak');
  }
  return portalNode;
}

function Portal({ children }) {
  const portalNode = usePortal();
  return ReactDOM.createPortal(children, portalNode);
}

export { PortalProvider, Portal };

            

              
                Copy
              
            
          

Foydalanish:

            import { PortalProvider, Portal } from './PortalContext';

function App() {
  return (
    <PortalProvider>
      <div>
        <p>Biror kontent</p>
        <Portal>
          <div style={{ backgroundColor: 'red', padding: '10px' }}>
            Bu portalda render qilinadi!
          </div>
        </Portal>
      </div>
    </PortalProvider>
  );
}

            

              
                Copy
              
            
          

3. Server Tomonida Rendering (SSR) Masalalari

React Portallarini server tomonida render qilingan ilovalarda ishlatganda, komponent render qilishga urinishidan oldin portal konteynerining DOMda mavjudligini ta'minlashingiz kerak. SSR paytida document ob'ekti mavjud emas, shuning uchun siz to'g'ridan-to'g'ri document.getElementById ga kira olmaysiz. Bir yondashuv - portal tarkibini faqat mijoz tomonida, komponent o'rnatilgandan so'ng shartli ravishda render qilish. Boshqa yondashuv - portal konteynerini serverda render qilingan HTML ichida yaratish va React komponenti mijozda gidratatsiya qilinganda uning mavjudligini ta'minlash.

Qulaylik (Accessibility) Masalalari

Modallar va qoplamalarni amalga oshirishda qulaylik barcha foydalanuvchilar, ayniqsa nogironligi bo'lganlar uchun yaxshi tajribani ta'minlash uchun juda muhimdir. Quyida ba'zi asosiy qulaylik masalalari keltirilgan:

• Fokusni Boshqarish: Yuqorida aytib o'tilganidek, fokusni ushlab turish modal qulayligi uchun juda muhimdir. Modal ochilganda, fokus avtomatik ravishda modal ichidagi birinchi fokuslanadigan elementga o'tkazilishi kerak. Modal yopilganda, fokus modalni ishga tushirgan elementga qaytishi kerak. focus-trap-react kabi kutubxonalar fokusni boshqarishni soddalashtirishga yordam beradi.
• ARIA Atributlari: Modalning roli va holati haqida semantik ma'lumot berish uchun ARIA atributlaridan foydalaning. Masalan, uning maqsadini ko'rsatish uchun modal konteynerida role="dialog" yoki role="alertdialog" dan foydalaning. Modalning modal ekanligini (ya'ni, sahifaning qolgan qismi bilan o'zaro ta'sirni oldini olishini) ko'rsatish uchun aria-modal="true" dan foydalaning.
• Klaviatura Navigatsiyasi: Modal ichidagi barcha interaktiv elementlarga klaviatura orqali kirish mumkinligini ta'minlang. Foydalanuvchilar Tab tugmasi yordamida modal tarkibida harakatlana olishlari va Enter yoki Bo'shliq tugmasi yordamida elementlar bilan o'zaro ta'sir o'tkaza olishlari kerak.
• Ekran O'quvchilari bilan Moslik: Modalning to'g'ri e'lon qilinishini va tarkibiga kirish mumkinligini ta'minlash uchun uni ekran o'quvchi bilan sinab ko'ring. Barcha rasmlar va interaktiv elementlar uchun tavsiflovchi yorliqlar va alternativ matnni taqdim eting.
• Kontrast va Rang: Qulaylik ko'rsatmalariga javob berish uchun matn va fon ranglari o'rtasida yetarli kontrastni ta'minlang. Ekran kattalashtirgichlari yoki yuqori kontrastli sozlamalarga tayanadigan ko'rish nuqsonlari bo'lgan foydalanuvchilarni hisobga oling.

Samaradorlikni Optimallashtirish

React Portallarining o'zi samaradorlik muammolarini keltirib chiqarmasa-da, yomon amalga oshirilgan modallar va qoplamalar ilova samaradorligiga ta'sir qilishi mumkin. Samaradorlikni optimallashtirish bo'yicha ba'zi maslahatlar:

• Kechiktirilgan Yuklash (Lazy Loading): Agar modal tarkibi murakkab yoki ko'plab rasmlarni o'z ichiga olsa, dastlabki sahifa yuklanish vaqtini yaxshilash uchun tarkibni kechiktirib yuklashni o'ylab ko'ring.
• Memoizatsiya: Modal komponenti va uning bolalarining keraksiz qayta render qilinishini oldini olish uchun React.memo dan foydalaning.
• Virtualizatsiya: Agar modal katta ro'yxatni o'z ichiga olsa, faqat ko'rinadigan elementlarni render qilish uchun react-window yoki react-virtualized kabi virtualizatsiya kutubxonasidan foydalaning.
• Debouncing va Throttling: Agar modalning xatti-harakati tez-tez sodir bo'ladigan hodisalar (masalan, oyna hajmini o'zgartirish) tomonidan qo'zg'atilsa, yangilanishlar sonini cheklash uchun debouncing yoki throttling'dan foydalaning.
• CSS O'tishlari va Animatsiyalari: Yaxshiroq ishlash uchun JavaScript-ga asoslangan animatsiyalar o'rniga CSS o'tishlari va animatsiyalaridan foydalaning.

Keng Tarqalgan Xatolar va Ulardan Qochish Yo'llari

• Tozalashni Unutish: Xotira sizib chiqishi va DOM ifloslanishining oldini olish uchun komponent o'chirilganda har doim portal konteynerini tozalang. useEffect hook'i oson tozalash imkonini beradi.
• Noto'g'ri Stacking Konteksti: Modal yoki qoplamaning boshqa elementlar ustida paydo bo'lishini ta'minlash uchun portal konteyneri va uning ota-ona elementlarining z-indexini ikki marta tekshiring.
• Qulaylik Muammolari: Qulaylikka e'tiborsizlik nogironligi bo'lgan foydalanuvchilar uchun yomon foydalanuvchi tajribasiga olib kelishi mumkin. Har doim qulaylik ko'rsatmalariga rioya qiling va modallaringizni yordamchi texnologiyalar bilan sinab ko'ring.
• CSS Konfliktlari: Portal tarkibi va ilovaning qolgan qismi o'rtasidagi CSS ziddiyatlaridan ehtiyot bo'ling. Uslublarni izolyatsiya qilish uchun CSS modullari, styled-components yoki CSS-in-JS yechimidan foydalaning.
• Hodisalarni Boshqarish Muammolari: Portal tarkibidagi hodisalarni boshqaruvchilar to'g'ri bog'langanligini va hodisalarning tasodifan ilovaning boshqa qismlariga tarqalmasligini ta'minlang.

React Portallariga Alternativalar

React Portallari ko'pincha modallar va qoplamalar uchun eng yaxshi yechim bo'lsa-da, siz ko'rib chiqishingiz mumkin bo'lgan alternativ yondashuvlar mavjud:

• CSS-ga Asoslangan Yechimlar: Ba'zi hollarda, siz React Portallariga ehtiyoj sezmasdan, faqat CSS yordamida kerakli vizual effektga erishishingiz mumkin. Masalan, siz modalni ilovaning eng yuqori darajasida joylashtirish uchun position: fixed va z-index dan foydalanishingiz mumkin. Biroq, bu yondashuvni boshqarish qiyinroq bo'lishi va CSS ziddiyatlariga olib kelishi mumkin.
• Uchinchi Tomon Kutubxonalari: Oldindan tayyorlangan modal va qoplama komponentlarini taqdim etadigan ko'plab uchinchi tomon React komponent kutubxonalari mavjud. Ushbu kutubxonalar sizning vaqtingizni va kuchingizni tejashi mumkin, ammo ular har doim ham sizning maxsus ehtiyojlaringizga moslashtirilmasligi mumkin.

Xulosa

React Portallari qulay va samarali modallar va qoplamalarni yaratish uchun kuchli vositadir. Portallarning afzalliklari va cheklovlarini tushunib, qulaylik va samaradorlik bo'yicha eng yaxshi amaliyotlarga rioya qilgan holda, siz foydalanuvchi tajribasini yaxshilaydigan va React ilovalaringizning umumiy sifatini oshiradigan UI komponentlarini yaratishingiz mumkin. Turli xil sotuvchilarga xos modullarga ega elektron tijorat platformalaridan tortib, murakkab UI elementlariga ega global SaaS ilovalarigacha, React Portallarini o'zlashtirish sizga mustahkam va kengaytiriladigan front-end yechimlarini yaratish imkonini beradi.